<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            // 创建一个"广州"节点，添加到#city下
            myclick("btn1", function () {
                // 创建li元素节点
                /*
                    document.createElement（）
                        可以创建一个元素节点对象
                        它需要一个标签名作为参数，将会根据该标签名创建元素对象
                        并将创建好的对象作为返回值返回
                */
                var li = document.createElement("li");
                //创建 广州文本
                /*
                    document.createTextNode()
                        可以用来创建一个文本节点对象
                        它需要一个文本内容作为参数，将会根据该内容创建文本节点
                        并将新节点返回
                */
                var gztext = document.createTextNode("广州");
                //将gztext 设置li的子节点
                /*
                    appendChild()
                        -向一个父节点中添加一个子节点
                        用法：父节点.appendChild(子节点)
                */
                li.appendChild(gztext);
                //获取id为city的节点
                var city = document.getElementById("city");
                //将广州添加到city下
                city.appendChild(li);
            })

            //将广州节点插入到#bj前面
            myclick("btn2", function () {
                //创建一个广州
                var li = document.createElement("li");
                var gztext = document.createTextNode("广州");
                li.appendChild(gztext);

                //获取id为bj的节点
                var bj = document.getElementById("bj");
                //获取id为city的节点
                var city = document.getElementById("city");
                /*
                    insertBefore()
                        -可以在指定的子节点前插入新的子节点
                        -语法:
                            父节点.insertBefore(新节点，旧节点);
                */
                city.insertBefore(li, bj);
            });
            // 使用广州节点替换#bj节点
            myclick("btn3", function () {
                //创建一个广州
                var li = document.createElement("li");
                var gztext = document.createTextNode("广州");
                li.appendChild(gztext);

                //获取id为bj的节点
                var bj = document.getElementById("bj");
                //获取id为city的节点
                var city = document.getElementById("city");
                /*
                    replaceChild()
                        -替换子节点。
                        -语法:
                            父节点.insertBefore(新节点，旧节点);
                */
                city.replaceChild(li, bj);
            });
            // 删除#bj节点
            myclick("btn4", function () {
                //获取id为bj的节点
                var bj = document.getElementById("bj");
                //获取id为city的节点
                var city = document.getElementById("city");
                /*
                    removeChild()
                        移除子节点
                            父节点.removeChild(子节点);

                */
                // city.removeChild(bj);
                //获取父节点后，删除子节点
                bj.parentNode.removeChild(bj);
            })
            //读取#city内的html代码
            myclick("btn5", function () {
                //获取id为city的节点
                var city = document.getElementById("city");
                alert(city.innerHTML);
            })
            //设置#bj内的html代码
            myclick("btn6", function () {
                //获取id为bj的节点
                var bj = document.getElementById("bj");
                bj.innerHTML = "自贡";
            })
            myclick("btn7", function () {
                //获取id为city的节点
                var city = document.getElementById("city");
                /*
                    使用innerHTML 也能实现DOM的增删改的操作
                */
                // city.innerHTML+="<li>广州</li>";  改动大
                var li = document.createElement("li");
                li.innerHTML = "广州";
                city.appendChild(li);
            })

            function myclick(idstr, fun) {
                var btn = document.getElementById(idstr);
                btn.onclick = fun;
            }
        };
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            display: flex;
            justify-content: center;
        }

        div.inner {
            margin-top: 50px;
            width: 300px;
            border: 1px solid black;
        }

        div.inner ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        div.inner ul li {
            background-color: skyblue;
            margin: 10px;
            box-sizing: border-box;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="total">
        <div class="inner">
            <p>你喜欢哪个城市？</p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>广州</li>
                <li>成都</li>
                <li>河南</li>
            </ul>
        </div>
    </div>
    <div id="btnlist" style="margin-left: 20px;">
        <div style="padding: 10px;"><button id="btn1">创建一个"广州"节点，添加到#city下</button></div>
        <div style="padding: 10px;"><button id="btn2">将广州节点插入到#bj前面</button></div>
        <div style="padding: 10px;"><button id="btn3">使用广州节点替换#bj节点</button></div>
        <div style="padding: 10px;"><button id="btn4">删除#bj节点</button></div>
        <div style="padding: 10px;"><button id="btn5">读取#city内的html代码</button></div>
        <div style="padding: 10px;"><button id="btn6">设置#bj内的html代码</button></div>
        <div style="padding: 10px;"><button id="btn7">创建一个"广州"节点，添加到#city下</button></div>

    </div>
</body>

</html>